<template>
  <div>
    <a-spin size="large" :spinning="spinning">
    <a-card size="small" :title="templetData.templet.templetName">
      <a-tabs :defaultActiveKey="0" v-if="templetData.templet.templetStyle === 'tab'">
        <template v-for="(group,index) in templetData.groups">
          <a-tab-pane :key="index" :tab="group.groupTxt">
            <group-template-card :style="{marginTop:(index === 0?'0px':'15px')}" v-if="group.groupStyle ==='card'" :group="group"></group-template-card>
            <group-template-tab :style="{marginTop:(index === 0?'0px':'15px')}" v-if="group.groupStyle ==='tab'" :group="group"></group-template-tab>
            <group-template-grid :style="{marginTop:(index === 0?'0px':'15px')}" v-if="group.groupStyle ==='grid'" :group="group"></group-template-grid>
          </a-tab-pane>
        </template>
      </a-tabs>
      <div v-if="templetData.templet.templetStyle === 'combination'">
          <template v-for="(group,index) in templetData.groups">
            <combination-graphreport-auto-chart :key="index" :style="{marginTop:(index === 0?'0px':'15px')}"  :group="group"></combination-graphreport-auto-chart>
          </template>
      </div>
      <div v-if="templetData.templet.templetStyle === 'grid'">
        <a-row :gutter="24">
          <template v-for="(group,index) in templetData.groups">
            <a-col :key="index" :xl="group.templetGrid.xl" :lg="group.templetGrid.lg" :md="group.templetGrid.md" :sm="group.templetGrid.sm">
              <group-template-card  v-if="group.groupStyle ==='card'" :group="group"></group-template-card>
              <group-template-tab  v-if="group.groupStyle ==='tab'" :group="group"></group-template-tab>
              <group-template-grid  v-if="group.groupStyle ==='grid'" :group="group"></group-template-grid>
            </a-col>
          </template>
        </a-row>
      </div>
    </a-card>
    </a-spin>
  </div>
</template>
<script>
// import { mapState } from 'vuex'
import GroupTemplateCard from '../components/GroupTemplateCard'
import GroupTemplateTab from '../components/GroupTemplateTab'
import GroupTemplateGrid from '../components/GroupTemplateGrid'
import CombinationGraphreportAutoChart from '../components/CombinationGraphreportAutoChart'
import { getAction } from '@/api/manage'
export default {
  name: 'OnlGraphreportTempletAutoChart',
  mixins: [],
  components: {
    CombinationGraphreportAutoChart, // 组合布局
    GroupTemplateCard,
    GroupTemplateGrid,
    GroupTemplateTab
  },
  computed: {

  },
  data() {
    return {
      url: {
        list: '/diagram/diagramCombination/getTempletData'
      },
      templetData: {
        templet: {},
        groups: []
      },
      spinning: true
    }
  },
  watch: {
    $route() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    details(code) {
      this.$router.push({ path: '/online/cggraphreport/chart/' + code })
    },
    init() {
      this.spinning = true
      this.templetData = {
        templet: {},
        groups: []
      }
      const url = this.$route.fullPath
      const code = url.replace('/online/cggraphreport/templet/', '')
      getAction(this.url.list, { templetCode: code }).then((res) => { // 根据code获取渲染数据
        if (res.success) {
          this.templetData = res.result
          this.templetData.groups.forEach(element => { // 栅格配置字段转换为object
            element.templetGrid = element.templetGrid && JSON.parse(element.templetGrid)
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.spinning = false
      })
    }
  }
}
</script>
<style scoped>

</style>
